<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" href="/css/base.css">
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.iframe-transport.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/jQuery-File-Upload-master/jquery.fileupload.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/base/tablePage.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/lib/jquery.form.min.js"></script>
    <script src="/js/street/highcharts.js"></script>
    <script src="/js/street/exporting.js"></script>
    <script src="/js/street/highcharts-zh_CN.js"></script>
    <title>企业统计</title>
    <style>
        .M-box .active, .M-box1 .active, .M-box2 .active, .M-box3 .active {
            background: #2f80d1!important;
            border: 1px solid #2b7fe0!important;
            margin: 0 3px!important;
            width: 29px!important;
            height: 29px!important;
            line-height: 29px!important;
            font-size: 12px!important;
        }
        .jump-ipt {
            margin: 0 3px;
            width: 28px;
            height: 26px;
            line-height: 26px;
            font-size: 12px;
        }
        .M-box a, .M-box1 a, .M-box2 a, .M-box3 a {
            margin: 0 3px!important;
            width: 29px!important;
            height: 29px!important;
            line-height: 29px!important;
            font-size: 12px!important;
        }
        td a{
            margin-right: 10px;
        }
        table td{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        body{
            background-color: #f7f7f7;
        }
        table tbody tr:nth-child(even){
            background-color: #fff;
        }
        .header{
            background-color: #f7f7f7;
        }
        .formHead{
            height: 40px;
        }
        .formHead span{
            line-height:40px;
        }
        .formbox{
            border: 1px solid #dedede;
            width: 900px;
            background-color: #fff;
            margin: 0 auto;
            border-radius: 2px;
            padding: 0 20px;
            padding-bottom: 10px;
        }
        .spans1{
            height: 20px;
            border-left: 7px solid #2b7ee0;
            margin-right: 5px;
            display: inline-block;
            position: absolute;
            top: 11px;
        }
        .span1title{
            height: 40px;
            display: inline-block;
            font-size: 18px;
            margin-left: 15px;
            font-weight: 600;
            color: #151515;
        }
        .secondtitle{
            height: 40px;
            line-height: 40px;
            margin-top: 15px;
            position: relative;
            z-index: 998;
        }
        .secondtitlespan{
            position: absolute;
            z-index: 99999;
            font-size: 16px;
            color: #2b7ee0;
            font-weight: 600;
            background-color: #fff;
        }
        .line{
            width: 100%;
            height: 20px;
            border-bottom: 1px dashed #ccc;
            position: relative;
            z-index: 900;
        }
        .formbox td{
            position: relative;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #424242;
            font-weight: 600;
            padding: 5px 10px;
            text-align: right;
        }
        .longText{
            width: 100%;
            border: 1px solid #d6d6d6;
            background-color: #f7f7f7;
            -webkit-border-radius: 6px;
            -moz-border-radius:6px;
            border-radius:6px;
        }
        .selectbox{
            width: 100%;
            border: 1px solid #d6d6d6;
            background-color: #f7f7f7;
            -webkit-border-radius: 6px;
            -moz-border-radius:6px;
            border-radius:6px;
        }
        .dwbtn{
            position: absolute;
            width: 60px;
            height: 30px;
            background-color: #228cdc;
            color: #fff;
            right: 5px;
            border-radius: 3px;
            cursor: pointer;
        }
        .lastbtn{
            width: 100px;
            height: 30px;
            background-color: #228cdc;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .img_box{
            font-weight: 500;
        }
        .spantextbox li{
            height: 30px;
            line-height: 30px;
        }
        .spantextbox li input{
            float: right;
            height: 20px;
            padding: 0;
            margin-top: 5px;
            text-indent: 5px;
            margin-right: 34px;
            width: 128px;
        }
        .header{
            top: 43px;
            border:none;
        }
        .head .headli3{
            width:100px;
        }
        .fffbg tbody tr input[type=text] {
            width: 70%;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding-left: 10px;
        }
        .fffbg tbody tr input[type=text]{
            width: 70%;
            height:30px;
            border:1px solid #ccc;
            border-radius: 4px;
            padding-left: 10px;
        }
        .fffbg tbody tr select{
            width: 70%;
            height:30px;
            border:1px solid #ccc;
            border-radius: 4px;
            padding-left: 10px;
        }

        #btnsearch{
            top: -42px;
            right: 53px;
            padding: 5px 10px;
            background: red;
            color: #fff;
            border-radius: 6px;
            position: absolute;
        }
        .errrs{
            width:100px;
            height: 100px;
            background: red;
            display: inline-block;
        }
        input[type=button]{
            width: 70px;
            height: 28px;
            line-height: 26px;
            padding-left:5px;
            text-align: center;
            background-image: url(../img/center_q.png);
            background-repeat: no-repeat;
            color: #000;
            cursor: pointer;
            font-size: 14px;
            font-family: Microsoft yahei,Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            float: none;
            border:none;
        }
        .chongzhi{
            width: 70px;
            height: 28px;
            line-height: 26px;
            padding-left:2px;
            text-align: center;
            background-image: url(../img/center_q.png);
            background-repeat: no-repeat;
            color: #000;
            cursor: pointer;
            font-size: 13px;
            font-family: Microsoft yahei,Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            float: none;
            display: inline-block;
            border:none;
        }
        textarea{
            outline: none;
            width: 70%;
            border-radius: 4px;
            padding:10px;
            height:60px;
        }
        .headTop{
            z-index: 999;
        }
        .body{
            width:100%;
            margin-top: 46px;
        }
        .pagediv,.bxtbox{
            float: left;
            padding-top: 100px;
        }
        .pagediv{
            width: 30%;
        }
        .pagediv td:first-child{
            cursor: pointer;
        }
        .pagediv td:first-child:hover{
            color: #8bc1ff;
        }
        .bxtbox{
            width:70%;
        }
        .highcharts-button-normal{
            display: none;
        }
        #body1{
            display: none;
        }
        #body1 .bxtbox1{
            float: left;
            padding-top: 100px;
            width:70%;
        }
        .bodytitle{
            position: absolute;
            display: inline-block;
            width: 100%;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            color: #000;
            top: 40px;
            left:0;
        }
        .lastbtn{
            margin-top: 40px;
            position: absolute;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="headTop">
        <div class="headImg">
            <img src="/img/document/icon_documentQuery.png" alt="">
        </div>
        <div class="divTitle">
            企业统计
        </div>
        <div class="closebtn" style="display: none">
            <button class="lastbtn" style="margin-left: 30px;background-color: #95aabe;float: right;margin-top: 7px;margin-right: 30px;" id="closebtn" type="button" onclick="closebtns($(this))">返回</button>
        </div>
    </div>
    <div class="body" id="body" style="background: #fff">
        <div class="bxtbox" ></div>
        <div class="pagediv">
            <table style="width: 90%;margin: 0 auto">
                <thead>
                <tr style="background-color: #fff;">
                    <th>企业性质</th>
                    <th>企业数量</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td onclick="clickbtn($(this))" name="一般法人单位" class="td1">一般安全生产法人单位</td>
                    <td class="type1">0</td>
                </tr>
                <tr>
                    <td onclick="clickbtn($(this))" name="小规模法人单位" class="td2">小规模安全生产法人单位</td>
                    <td class="type2">0</td>
                </tr>
                <tr>
                    <td onclick="clickbtn($(this))" name="大型个体工商户" class="td3">大型安全生产个体工商户</td>
                    <td class="type3">0</td>
                </tr>
                <tr>
                    <td onclick="clickbtn($(this))" name="小型个体工商户" class="td4">小型安全生产个体工商户</td>
                    <td class="type4">0</td>
                </tr>
                <tr>
                    <td onclick="clickbtn($(this))" name="在建工程项目" class="td5">在建工程项目</td>
                    <td class="type5">0</td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td class="type6">0</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="body" id="body1" style="position: relative;">
        <div class="bxtbox1" style="height:300px"></div>
        <div class="pagediv" style="position: relative;">
            <table style="width: 90%;margin: 0 auto">
                <thead>
                <tr style="background-color: #fff;">
                    <th>状态类型</th>
                    <th>企业数量</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td name="严重隐患">严重隐患</td>
                    <td class="types1">0</td>
                </tr>
                <tr>
                    <td name="隐患整改">隐患整改</td>
                    <td class="types2">0</td>
                </tr>
                <tr>
                    <td name="合格达标">合格达标</td>
                    <td class="types3">0</td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td class="types4">0</td>
                </tr>
                </tbody>
            </table>
            <div><button class="lastbtn" style="margin-left: 30px;background-color: #95aabe" id="closebtn" type="button" onclick="closebtns($(this))">返回</button></div>
        </div>
    </div>

    <script>
        autodivheight();
        function autodivheight() {
            var winHeight = 0;
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            if (document.documentElement && document.documentElement.clientHeight)
                winHeight = document.documentElement.clientHeight;
            winWidth = document.documentElement.clientWidth;
            document.getElementById("body").style.height = winHeight - 76  + "px";
            document.getElementById("body1").style.height = winHeight - 76  + "px";
        }
        function clickbtn(e){
            $('#body').hide();
            $('#body1').show();
            if(e.attr('name') == '一般法人单位'){
                var typeid = 1;
                var str = '<div class="bodytitle">一般安全生产法人单位</div>'
            }else if(e.attr('name') == '小规模法人单位'){
                var typeid = 2;
                var str = '<div class="bodytitle">小规模安全生产法人单位</div>'
            }else if(e.attr('name') == '大型个体工商户'){
                var typeid = 3;
                var str = '<div class="bodytitle">大型安全生产个体工商户</div>'
            }else if(e.attr('name') == '小型个体工商户'){
                var typeid = 4;
                var str = '<div class="bodytitle">小型安全生产个体工商户</div>'
            }else if(e.attr('name') == '在建工程项目'){
                var typeid = 5;
                var str = '<div class="bodytitle">在建工程项目</div>'
            }
            $('#body1').append(str);
            $.ajax({
                url:'/fixForm/selectCountByTypeId?typeId='+typeid,
                type:'get',
                data:[],
                success: function(res){
                    var data = res.datas;
                    for(var i =0;i<data.length;i++){
                        if(data[i].typeName == '01'){
                            $('.types1').html(data[i].typeCount);
                        }else if(data[i].typeName == '02'){
                            $('.types2').html(data[i].typeCount);
                        }else if(data[i].typeName == '03'){
                            $('.types3').html(data[i].typeCount);
                        }
                    }
                    $('.types4').html(res.total);

                    var type1 = $('.types1').text()/$('.types4').text();
                    var num1 = type1 * 100;
                    var type2 = $('.types2').text()/$('.types4').text();
                    var num2 = type2 * 100;
                    var type3 = $('.types3').text()/$('.types4').text();
                    var num3 = type3 * 100;

                    $('.bxtbox1').highcharts({
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false
                        },
                        title: {
                            text: '企业状态企业数量占比'
                        },
                        tooltip: {
                            headerFormat: '{series.name}<br>',
                            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    }
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: '企业数量占比',
                            data: [
                                ['严重隐患',   num1],
                                ['隐患整改',       num2],
                                ['合格达标',   num3],
                            ]
                        }],
                        credits: {
                            enabled: false
                        }
                    });
                }
            })
        }
        function closebtns(e){
            $('#body').show();
            $('#body1').hide();
            $('.types1').html('0');
            $('.types2').html('0');
            $('.types3').html('0');
            $('.bodytitle').remove();
            $('.bxtbox1').empty();
        }
        window.onresize = autodivheight;
        $(function () {
            $.ajax({
                url:'/fixForm/selectCounts',
                type:'get',
                data:[],
                success: function(res){
                    var data = res.data;
                    $('.type1').html(data.num1);
                    $('.type2').html(data.num2);
                    $('.type3').html(data.num3);
                    $('.type4').html(data.num4);
                    $('.type5').html(data.num5);
                    $('.type6').html(data.sum);
                    var type1 = $('.type1').text()/$('.type6').text();
                    var num1 = type1 * 100;
                    var type2 = $('.type2').text()/$('.type6').text();
                    var num2 = type2 * 100;
                    var type3 = $('.type3').text()/$('.type6').text();
                    var num3 = type3 * 100;
                    var type4 = $('.type4').text()/$('.type6').text();
                    var num4 = type4 * 100;
                    var type5 = $('.type5').text()/$('.type6').text();
                    var num5 = type5 * 100;
                    $('.bxtbox').highcharts({
                        chart: {
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false
                        },
                        title: {
                            text: '企业台账企业数量占比'
                        },
                        tooltip: {
                            headerFormat: '{series.name}<br>',
                            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                    style: {
                                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                    }
                                },
                                events: {
                                    click: function (event) {

                                        var names = event.point.name;

                                        if(names == '一般法人单位'){
                                            $('.td1').click();
                                        }else if(names == '小规模法人单位'){
                                            $('.td2').click();
                                        }else if(names == '大型个体工商户'){
                                            $('.td3').click();
                                        }else if(names == '小型个体工商户'){
                                            $('.td4').click();
                                        }else if(names == '在建工程项目'){
                                            $('.td5').click();
                                        }

                                    }
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: '企业数量占比',
                            data: [
                                ['一般法人单位',   num1],
                                ['小规模法人单位',       num2],
                                ['大型个体工商户',   num3],
                                ['小型个体工商户',    num4],
                                ['在建工程项目',     num5]
                            ]
                        }],
                        credits: {
                            enabled: false
                        }
                    });
                }
            })
        });
    </script>
</body>
</html>